<template>
    <div>
        <h1>菜单管理</h1>
        <div class="actions">
            <el-button @click="menuDialog.visible = true" type="primary" round plain>新增菜单</el-button>
        </div>
        <el-divider></el-divider>
        <el-table row-key="id" :data="menu.menuList" default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="id" label="序号" min-width="80"></el-table-column>
            <el-table-column prop="title" label="菜单标题" min-width="120"></el-table-column>
            <el-table-column prop="icon" label="菜单图标" min-width="120">
                <template v-slot="{ row }">
                    <el-icon size="24" v-if="row.icon">
                        <component :is="row.icon" />
                    </el-icon>
                </template>
            </el-table-column>

            <el-table-column prop="url" label="菜单地址" min-width="120"></el-table-column>
            <el-table-column prop="avatar" label="菜单状态" min-width="120">
                <template v-slot="{ row }">
                    <el-tag type="primary" v-if="row.status === 1">启用</el-tag>
                    <el-tag type="danger" v-else>禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="180">
                <template v-slot="{ row }">
                    <el-button @click="edit(row)" type="primary" plain size="small" round>编辑</el-button>
                    <el-button @click="menuDel(row.id)" type="danger" plain size="small" round>删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <MenuDialog ref="menuDialog" />
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import MenuDialog from './MenuDialog'
import { onMounted, ref } from 'vue'
import { menuRemove } from '@/utils/api'

import { useStore } from 'vuex'
const store = useStore()
const { dispatch, state: { menu } } = store
onMounted(() => {
    dispatch('menu/getMenuListAction')
})
const menuDialog = ref(null)
const menuDel = (id) => {
    ElMessageBox.confirm('确认删除', '确认提示', { type: 'warning' }).then(async () => {
        const { data } = await menuRemove(id)
        ElMessage({ message: data.msg, type: data.code === 200 ? 'success' : 'error' })
        if (data.code === 200) {
            dispatch('menu/getMenuListAction')
        }
    })
}

const edit = (row) => {
    // console.log(row);
    menuDialog.value.getEditData(row);
}
</script>

<style></style>